<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Content</title>
    <style></style>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react Dom库 用于支持 react操作dom-->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将 jsx 转为 js -->
    <script src="../js/babel.min.js"></script>

    <!-- 使用babel 转译jsx -->
    <script type="text/babel">
      // 1.只要执行setState() 即使不改变状态数据，组件也会重新 render 效率低
      // 2.只当前组件重新render()就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 效率低

      // 使用 PureComponent相当于使用了阀门生命周期
      // 不需要自己手动写阀门生命周期
      import React, { PureComponent } from "react";
      class Parent extends PureComponent {
        state = { carName: "奔驰c63" };
        changeCar = () => {
          this.setState({
            carName: "迈巴赫",
          });
        };
        // shouldComponentUpdate(nextProps, nextState) {
        //   //console.log(this.props, this.state); //目前的
        //   // console.log(nextProps, nextState); //接下来变化的
        //   // 没有变化就return false  后面的 render就不调用了
        //   if (this.state.carName === nextState.carName) return false;
        //   else return true;
        // }
        render() {
          const { carName } = this.state;
          console.log("P-render");
          return (
            <div>
              <div>我是Parent组件</div>
              <div>车：{carName}</div>
              <button onClick={this.changeCar}>点击换车</button>
              <Child carName={carName} />
            </div>
          );
        }
      }

      class Child extends PureComponent {
        // shouldComponentUpdate(nextProps, nextState) {
        //   // console.log(this.props, this.state); //目前的
        //   //console.log(nextProps, nextState); //接下来变化的
        //   if (this.props.carName === nextProps.carName) return false;
        //   else return true;
        // }
        render() {
          console.log("C-render");
          return (
            <div>
              <div>我是Child组件</div>
              <div>接收父组件的车{this.props.carName}</div>
            </div>
          );
        }
      }
      ReactDOM.render(<Parent />, document.getElementById("test"));
    </script>
  </body>
</html>
